<template>
  <div class="mwDetailBox">
    <div class="topBox">
      <p>初步研判</p>
      <a-icon type="close" @click="onClose"
        :style="{ fontSize: '16px', color: '#525252', float: 'right', margin: '10px' }" />
    </div>
    <div class="box box1">
      <a-row style="margin-bottom:10px;">
        <a-col :span="24">
          <span>模型名称：</span><span>异常出入岛人群挖掘</span>
        </a-col>
      </a-row>
      <a-row style="margin-bottom:10px;">
        <a-col :span="24">
          <span>情报更新时间：</span><span>{{ formatTime(updateTime) }}</span>
        </a-col>
      </a-row>
    </div>
    <div class="box box2">
      <p>情报规则:</p>
      <a-tabs>
        <a-tab-pane key="1" tab="入岛">
          <a-row style="margin-bottom:10px;">
            <a-col :span="24">
              <span>进入区域：</span>
              <template v-if="modelRule.in != undefined && modelRule.in.areas != undefined">
                <a-tag v-for="(item, index) in modelRule.in.areas" :key="index">{{ item }}</a-tag>
              </template>
            </a-col>
          </a-row>
          <a-row style="margin-bottom:10px;">
            <a-col :span="4">
              <span>情报规则：</span>
            </a-col>
            <a-col :span="20">
              <p>前 <span class="s1">{{ inData.beforeHour }}</span> 小时岛内无信令位置信息，然后在区域内出现信令，符合以下几种情况： </p>
              <p>1、号码归属地为 <span class="s1">{{ inData.ascriptionPlaceName }}</span></p>
              <p>2、近 <span class="s1">{{ inData.accessSource }}</span> 天有访问指定信源：<span class="s1">{{ inSourceUrl
              }}</span></p>
              <p>3、近 <span class="s1">{{ inData.sendMes }}</span> 天有发送维文dx</p>
              <p>取并集后，排除常住人员。</p>
              <p>常住人员定义为 <span class="s1">{{ inData.residentDefinedDays }}</span> 天内出现 <span class="s1">{{
                inData.residentDefinitionTime
              }}</span> 次及以上的人员</p>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="出岛" force-render>
          <a-row style="margin-bottom:10px;">
            <a-col :span="24">
              <span>进入区域：</span>
              <template v-if="modelRule.out != undefined && modelRule.out.areas != undefined">
                <a-tag v-for="(item, index) in modelRule.out.areas" :key="index">{{ item }}</a-tag>
              </template>
            </a-col>
          </a-row>
          <a-row style="margin-bottom:10px;">
            <a-col :span="4">
              <span>情报规则：</span>
            </a-col>
            <a-col :span="20">
              <p>前 <span class="s1">{{ outData.beforeHour }}</span> 小时岛内有信令位置信息，然后在区域内出现信令后又无位置信息时长达 <span class="s1">{{
                outData.locationInfoDuration }}</span> 分钟，符合以下几种情况：
              </p>
              <p>1、号码归属地为 <span class="s1">{{ outData.ascriptionPlaceName }}</span></p>
              <p>2、近 <span class="s1">{{ outData.accessSource }}</span> 天有访问指定信源：<span class="s1">{{ outSourceUrl
              }}</span></p>
              <p>3、近 <span class="s1">{{ outData.sendMes }}</span> 天有发送维文dx</p>
              <p>取并集后，排除常住人员。</p>
              <p>常住人员定义为 <span class="s1">{{ outData.residentDefinedDays }}</span> 天内出现 <span class="s1">{{
                outData.residentDefinitionTime
              }}</span> 次及以上的人员</p>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="box box3">
      <p>基本信息:</p>
      <a-row style="margin-bottom:10px;">
        <a-col :span="10">
          <span>手机号：</span><span>{{ intelligenceData.phone }}</span>
        </a-col>
        <a-col :span="14">
          <span>归属地：</span><span>{{ intelligenceData.ascriptionPlace }}</span>
        </a-col>
      </a-row>
      <a-row style="margin-bottom:10px;">
        <a-col :span="24">
          <span>命中规则：</span><span>{{ intelligenceData.hitRule }}</span>
        </a-col>
      </a-row>
    </div>
    <div class="box box4">
      <p>详细信息:</p>
      <CustomTable ref="table" :showAlert="false" :columns="columns" :dataSource="pageData" :showSelection="false"
        :showPagination="true" rowKey="id" @change="onTableChange">
        <template slot="intelligenceType" slot-scope="text">
          <span v-if="text == '1'">异常入岛</span>
          <span v-if="text == '2'">异常出岛</span>
        </template>
      </CustomTable>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/wxSmuggle/intelligence.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import moment from 'moment'
export default {
  props: ['visible'],
  components: {
    CustomTable
  },
  data() {
    return {
      pageFilter: {
        // pageNo: 1,
        // pageSize: 10
      },
      pageData: {},
      columns: [
        {
          title: '出现时间',
          dataIndex: 'occurrenceTime',
          // width: 100,
          align: 'center',
          scopedSlots: { customRender: 'occurrenceTime' }
        },
        {
          title: '当前位置',
          dataIndex: 'posName',
          align: 'center',
          // width: 110,
          scopedSlots: { customRender: 'posName' }
        },
        {
          title: '情报类型',
          dataIndex: 'intelligenceType',
          align: 'center',
          // width: 100,
          scopedSlots: { customRender: 'intelligenceType' }
        }
      ],
      inData: {},
      outData: {},
      modelRule: {
        in: {
          areas: [],
          // sourceUrl: []
        },
        out: {
          areas: [],
          // sourceUrl: []
        }
      },
      intelligenceData: {},
      inSourceUrl: "",
      outSourceUrl: "",
      updateTime: ""
    }
  },
  mounted() {
    // this.refreshTable()
  },
  methods: {
    show(row) {
      console.log(row)
      this.pageFilter.id = row.id
      this.updateTime = row.updateTime
      // this.modelRule = row.modelRule
      this.refreshTable()
    },
    formatTime(str) {
      return moment(new Date(str)).format('YYYY-MM-DD HH:mm:ss')
    },
    refreshTable() {
      this.loading = true
      api
        .crypoIntellDetail(this.pageFilter)
        .then(res => {
          if (res.success) {
            //基本信息
            this.intelligenceData = res.result.intelligenceData
            //情报规则
            let arr1 = res.result.keyPersonAllocation
            arr1.forEach(item => {
              if (item.isAccessIsland == 1) { this.outData = item }//1:出岛
              if (item.isAccessIsland == 2) { this.inData = item }//2:入岛
            });
            //区域和信源
            this.modelRule.in.areas = []
            this.modelRule.out.areas = []
            this.inSourceUrl = ""
            this.outSourceUrl = ""
            let arr2 = res.result.sourceAreaUrlDTOS
            arr2.forEach(item => {
              if (item.status == 1) { //1:出岛 
                item.areas.forEach(item1 => {
                  this.modelRule.in.areas.push(item1.someAreaName)
                })
                item.sourceUrl.forEach(item1 => {
                  this.inSourceUrl += item1.url + ', '
                })
              } else { //2：入岛
                item.areas.forEach(item1 => {
                  this.modelRule.out.areas.push(item1.someAreaName)
                })
                item.sourceUrl.forEach(item1 => {
                  this.outSourceUrl += item1.url + ', '
                })
              }
            });
            //详细信息
            this.pageData = res.result.positionInformation
            console.log("111111111")
            console.log(this.modelRule)

            this.loading = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warn(res.message)
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onClose(value) {
      this.$emit('close', value)
    }
    // onClickRow(row, n) {
    //   this.active = n
    //   this.$emit('on-click-row', row)
    // },
  }
}
</script>

<style lang="less" scoped>
.mwDetailBox {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 500px;
  background-color: #fff;

  .topBox {
    background-color: #f2f2f2 !important;
    overflow: hidden;

    p {
      float: left;
      color: #000;
      padding: 15px 10px 0;
      font-weight: 500;
      font-size: 16px;
      // line-height: 22px;
    }

    /deep/.anticon {
      float: right;
      margin: 10px;
    }
  }

  .box {
    padding: 0 10px;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;

    p {
      // font-weight: bold;
    }

    span {
      color: #000;
    }
  }

  .add-box {
    position: absolute;
    right: 10px;
    top: 100px;
  }
}

.editable-row-operations {
  a {
    color: #108de9;
  }
}

.input {
  width: 60px;
  margin: 5px 6px;
}

/deep/.ant-col-15 {
  width: 65%;
}

.s1 {
  font-weight: bold;
}

// .py_list_drawer tr:hover > td {
//   cursor: !important;
// }
// .mwDetailTable .spanBtn {
//   width: 100%;
//   display: inline-block;
//   cursor: pointer;
// }
</style>
